<template>
    <view :style="{ paddingTop: top + 'px' }" class="min-h-screen bg bg-[#F8F8F8]">
        <view :style="{ height: pendantHight + 'px' }"
            class="text-[#3D3D3D] font-medium  flex items-center justify-center text-[40rpx] relative">
            微信绑定
            <view @click="goback" class="absolute left-[36rpx]"><up-icon name="arrow-left" color="#000"
                    size="23"></up-icon></view>

        </view>
        <view class="mt-[195rpx] text-center text-[39rpx] font-medium">
            <view class="tracking-widest"> 绑定熊猫校友会账号</view>
            <view class="mt-1 tracking-widest"> 快捷登录</view>


        </view>
        <view class="mx-[40rpx] mt-[150rpx]">
            <input v-model="phone" class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx]" type="number" placeholder="请输入手机号码">
            <view class="flex items-center justify-center  mt-[45rpx]">
                <input v-model="code" class="bg-[#EFEFEF] h-[88rpx]  rounded px-[45rpx]  flex-1" type="number"
                    placeholder="请输入验证码">
                <view @click="getCode"
                    class="w-[166rpx] rounded-tr rounded-br font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    {{countdown==0?'获取验证码':countdown+'s'}}</view>
            </view>


        </view>
        <view class="mt-[252rpx] flex justify-center">
            <view @click="successful = true"
                class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                绑定</view>
        </view>
    </view>
    <u-popup :show="successful" @close="successful = false" mode="center" round="12" :safeAreaInsetBottom="false">
        <view v-if="false" class=" bg-white flex flex-col items-center w-[80vw] rounded pt-[82rpx] pb-[60rpx]">
            <u-icon name="weixin-circle-fill" color="#28C445" size="57"></u-icon>

            <view class="mt-[32rpx] text-[#3D3D3D] text-[38rpx] font-bold">微信绑定成功</view>
            <view class="mt-[126rpx] flex justify-center">
                <view
                    class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    确定</view>
            </view>
        </view>
        <view v-else class=" bg-white flex flex-col items-center w-[80vw] rounded pt-[82rpx] pb-[60rpx]">
            <image class="w-[184rpx] h-[98rpx]" src="https://gangantao.com/image/20241218/9d9ad050-c59d-450e-a523-7a50e1210263.png"></image>

            <view class="mt-[32rpx] text-[#3D3D3D] text-[38rpx] font-bold">该手机号码未注册 </view>
            <view class="mt-[6rpx] text-[#3D3D3D] text-[38rpx] font-bold">请先注册后再绑定 </view>
            
            <view class="mt-[126rpx] flex justify-center">
                <view @click="navigateTo('/pages/register/register')"
                    class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    去注册</view>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
import api from "@/api/api"
import { useUserStore } from '@/stores/userinfo'
import { ref } from "vue"
const res = wx.getMenuButtonBoundingClientRect()
const top = ref(res.top) //胶囊距上距离
const pendantHight = ref(res.bottom - res.top) //胶囊高度  
const code = ref("")
const phone = ref("")
const successful = ref(false)
const countdown = ref(0)
const getCode = async () => {
    
    uni.showLoading({
        title: '发送中',
        mask: true
    })
    const regex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (regex.test(phone.value)) {
        countdown.value = 60
       const timer =  setInterval(() => {
            countdown.value--
            if (countdown.value == 0) {
                clearInterval(timer)
            }
        }, 1000)
        const res = await api.qrcode({
            user_id: phone.value
        })
        if (res.code == 200) {
            uni.showToast({
                title: '发送成功',
                icon: 'none'
            })
        }else{
            uni.showToast({
                title: res.msg,
                icon: 'error'
            })
        }


    }else{
        uni.showToast({
        title: '请输入正确手机号码',
        icon: 'none'
    })
    }

    
}
const goback = () => {
    uni.navigateBack()
}
const navigateTo = (url)=>{
    uni.navigateTo({
        url
    })
}
</script>

<style lang="scss" scoped>
.bg {
    background: linear-gradient(168deg, rgba(255, 146, 127, 0.4) 0%, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
}
</style>